import { Card } from 'antd-mobile'
import React, { useState } from 'react'
import { useEmberboxStore } from '../../hooks/store'

const trafficLists = [
    {
        id: 0,
        name: '楼梯',
        icon: "/setpath/楼梯.png"
    },
    {
        id: 1,
        name: '扶梯',
        icon: "/setpath/扶梯.png"
    },
    {
        id: 2,
        name: '电梯',
        icon: "/setpath/电梯.png"
    },
]

/**
 * 
 * @returns 
 */
const SetTrafficType = ({ type, setType }: any) => {




    return <>
        <div className='absolute top-[-3.6rem]'>
            <div className='waytypeselect w-[11.79rem] h-[2.29rem] bg-[#fff] rounded-[1.15rem] shadow-lg flex justify-center items-center gap-4' >
                {trafficLists.map(item => <>
                    <div className={[type === item.id ? 'p-2  bg-[#52F4FF] rounded-full' : ''].join(' ')}
                        key={item.id}
                        onClick={() => setType(item.id)}
                    >
                        <img className='w-[2.71rem] h-[1.14rem]' src={item.icon} alt="" />
                    </div>
                </>)}
            </div>
        </div>
    </>

}

const index = () => {
    const [type, setType] = useState<number>(2)
    const [ready, setReady] = useState<boolean>(false)//路线起点终点是否确认
    const store: any = useEmberboxStore()//仓库
    return (
        <>
            <div className='absolute top-0 left-0 right-0 p-4'>
                <Card>
                    {/* 起点终点选择 */}
                    <div className='w-full  flex justify-between items-start'>
                        <div>
                            <img className='w-8 h8 mt-2' src="/svgs/left.svg" alt="" />
                        </div>
                        <div className=' bg-second color-second w-[29.86rem] h-[5.14rem] rounded-[1.14rem] '>
                            <div className='w-full h-full p-2 flex justify-around items-center'>
                                <div className='h-full w-[14.14rem] flex flex-col justify-center gap-2 leading-[1rem]'>
                                    <div className='text-[#3734A9] font-bold flex gap-4'>
                                        <span>&bull;</span>
                                        <span className='font-normal color-second text-[1rem]'>住院/收费</span>
                                        <span>F1</span>
                                    </div>
                                    <div className='w-full h-[0.14rem] bg-[#0002]'></div>
                                    <div className='text-[#52F4FF] font-bold flex gap-4'>
                                        <span>&bull;</span>
                                        <span className='font-normal color-second text-[1rem]'>住院/收费</span>
                                        <span>F1</span>
                                    </div>
                                </div>

                                <div>
                                    <img className='w-[1.14rem]' src="/setpath/切换@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
            <div className='bg-prime color-prime min-h-0  bg-[#fff] rounded-t-[1.14rem] fixed  inset-x-0 bottom-0 px-4 py-8 flex flex-col justify-center items-center  select-none text-xs '>
                {ready === true && <>
                    {/* 选择路径方式 */}
                    <SetTrafficType type={type} setType={setType} />
                    {/* 路径概况 */}
                    <div className='w-full   flex justify-around mb-4'>
                        <div className='flex items-end'>
                            <img className='w-[1.14rem] h-[1.14rem]' src="/setpath/定位@2x.png" alt="" />
                            <span>距离</span>
                            <span className='text-[1.2rem] font-medium'>165</span>
                            <span>米</span>
                        </div>
                        <div className='flex'>
                            <img className='w-[1.14rem] h-[1.14rem]' src="/setpath/定位@2x.png" alt="" />
                            <span>大约</span>
                            <span className='text-[1.2rem] font-medium'>1</span>
                            <span>分</span>
                            <span className='text-[1.2rem] font-medium'>23</span>
                            <span>秒</span>
                        </div>
                    </div>
                    <div className='w-[8rem] h-[2.57rem] leading-[2.57rem] bg-[#3734A9] text-[#fff] flex justify-center items-cneter rounded-[1.25rem]'
                        onClick={() => setReady(false)}
                    >
                        模拟导航
                    </div>
                    <div className='w-[8rem] h-[2.57rem] leading-[2.57rem] bg-[#3734A9] text-[#fff] flex justify-center items-cneter rounded-[1.25rem]'
                        onClick={() => store.setState('Navigiting')}
                    >
                        开始导航
                    </div>
                </>}
                {
                    ready === false && <>
                        <div className='w-full   flex justify-around mb-4'>
                            <div className='flex items-end'>

                                <span>在医院内检测不到您的位置</span>

                            </div>
                        </div>
                        <div className='border-purple w-[8rem] h-[2.57rem] leading-[2.57rem] bg-[#9B99D455] text-[#3734A9] 
                             flex justify-center items-cneter rounded-[1.25rem] '
                            onClick={() => setReady(true)}
                        >
                            选择起点
                        </div>
                    </>}

            </div>
        </>
    )
}

export default index